<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
	<head></head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width， initial-scale=1">
		<title>会员登录</title>
		<link rel="stylesheet" href="../css1/bootstrap.min.css" type="text/css" />
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript"></script>
		<script src="../js/jquery.validate.min.js" type="text/javascript"></script>
		<script src="../js/messages_zh.js" type="text/javascript"></script>
		
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="../css1/style1.css" type="text/css"/>

<style>
  body{
   margin-top:20px;
   margin:0 auto;
 }
 .carousel-inner .item img{
	 width:100%;
	 height:300px;
 }
 .container .row div{ 
	 /* position:relative;
	 float:left; */
 }
 
font {
    color: #3164af;
    font-size: 18px;
    font-weight: normal;
    padding: 0 10px;
}
 </style>
 <script type="text/javascript" >
 $(function(){
		// 自定义校验规则
		$.validator.addMethod("checkUser",
				function(value,element,params){
					var pass = false;
					// value: 输入内容，需要给数据库对比
					$.ajax({
						url: "/zzLoveProduct/CheckUserServlet",
						data: {
							"username": value
						},
						success:function(data){
							// data.isExists -> true -> 校验不通过
							// data.isExists -> false -> 校验通过
							pass = !data.isExists ;
						},
						dataType: "json",
						async: false // 必须同步
					});
					return pass; // 返回true表示校验通过
		});
		$.validator.addMethod("checkImg",
				function(value,element,params){
					var pas=false;
					$.ajax({
						url:"/zzLoveProduct/CheckImgServlet1",
						data:{
							"checkcodeinput": value
						},
						success:function(data){
							pas=data.isTrue;
						},
						dataType:"json",
						async:false
					});
					return pas;
		});
		$("#regForm").validate({
			rules: {
				username: {
					required: true,
					maxlength: 10,
					minlength: 1,
					checkUser: true
				},
				password: {
					required: true,
					minlength: 6,
					maxlength: 20
				},
				nikename:{
					required: true,
					maxlength:20
				},
				gendar:{
					required: true,
				},
				birthday:{
					required: true,
				},
				location:{
					required: true,
				},
				checkcodeinput:{
					required: true,
					checkImg:true
				}
				
			},
			messages: {
				username: {
					required: "用户名不能为空",
					maxlength: "用户名长度不能超过10",
					minlength: "用户名长度不能小于1",
					checkUser: "用户名已存在"
				},
				password: {
					required: "密码不能为空",
					minlength: "密码长度不能小于6",
					maxlength: "密码长度不能超过20"
				},
				nikename:{
					required: "昵称不能为空",
					maxlength:"昵称长度不能超过20"
				},
				gendar:{
					required: "性别不能为空",
				},
				birthday:{
					required: "出生日期不能为空",
				},
				location:{
					required: "地区不能为空",
				},
				checkcodeinput:{
					required: "验证码不能为空",
					checkImg:"验证码错误"
				}
			}
		});
		$("#checkcode").click(function(){
      		 $("#checkcode").prop("src","/zzLoveProduct/CheckImgServlet?time="+new Date());
      	 });
		$("#login").click(function(){
			location.href="/zzLoveProduct/login/login/login.jsp";
		});

	});
	
 </script>
</head>
<body>
			<!-- 描述：菜单栏 -->
			<div class="container-fluid" style="width:100%;background:url('images/bg.jpeg');">
				<div class="col-md-4">
					<img src="images/zzaq.png" width="25%"/>
				</div>
				
				<div class="col-md-5" style="padding-top:20px">
					<!--  <h4>指针爱情网</h4>-->
				</div>
				<div class="col-md-3" style="padding-top:20px">
					<ol class="list-inline">
						<button class="btn btn-outline-success my-2 my-sm-0"
								 style="background: #03cce6;" id="login">登录</button>
					</ol>
				</div>
			</div>
			<!-- 描述：导航条 -->
			 


<div class="container" style="width:100%;background:url('images/bg.jpeg');">
<div class="row"> 

	<div class="col-md-2"></div>
	
	


	<div class="col-md-8" style="background:#fff;padding:40px 80px;margin:30px;border:7px solid #ccc;">
		<font>会员注册</font>USER REGISTER
		<form class="form-horizontal" style="margin-top:5px;"
			action="/zzLoveProduct/RegistServlet" id="regForm"
		>
			 <div class="form-group">
			    <label for="username" class="col-sm-2 control-label">用户名</label>
			    <div class="col-sm-6">
			      <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username">
			    </div>
			  </div>
			  
			   <div class="form-group">
			    <label for="password" class="col-sm-2 control-label">密码</label>
			    <div class="col-sm-6">
			      <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password">
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="nikename" class="col-sm-2 control-label">昵称</label>
			    <div class="col-sm-6">
			      <input type="text" class="form-control" id="nikename" placeholder="请输入昵称" name="nikename">
			    </div>
			  </div>
			  
			   <!--  <div class="form-group">
			    <label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
			    <div class="col-sm-6">
			      <input type="password" class="form-control" id="confirmpwd" placeholder="请输入确认密码">
			    </div>
			  </div>-->
			  
			  
			 <!--  <div class="form-group">
			    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
			    <div class="col-sm-6">
			      <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email">
			    </div>
			  </div>-->
			  
			 <!-- <div class="form-group">
			    <label for="usercaption" class="col-sm-2 control-label">姓名</label>
			    <div class="col-sm-6">
			      <input type="text" class="form-control" id="usercaption" placeholder="请输入姓名" name="realname">
			    </div>
			  </div>
			  -->
			  
			  
			  <div class="form-group opt">  
			  <label for="inlineRadio1" class="col-sm-2 control-label">性别</label>  
			  <div class="col-sm-6">
			    <label class="radio-inline">
			  <input type="radio" name="gendar" id="gendar" value="男" > 男
			</label>
			<label class="radio-inline">
			  <input type="radio" name="gendar" id="gendar" value="女" > 女
			</label>
			</div>
			  </div>
			  		
			  <div class="form-group">
			    <label for="date" class="col-sm-2 control-label">出生日期</label>
			    <div class="col-sm-6">
			      <input type="date" class="form-control" name="birthday" id="birthday">		      
			    </div>
			  </div>
			  
			  <!-- 地区 -->
			  <div class="form-group">
			    <label for="text" class="col-sm-2 control-label">地区</label>
			    <div class="col-sm-6">
			    <select class="form-control" name="location" id="location" onchange="changePro()">
					
					<option value="北京市">北京市</option>	
					<option value="天津市">天津市</option>	
					<option value="上海市">上海市</option>	
					<option value="重庆">重庆市</option>	
					<option value="河北省">河北省</option>	
					<option value="山西省">山西省</option>	
					<option value="辽宁省">辽宁省</option>	
					<option value="吉林省">吉林省</option>	
					<option value="黑龙江省">黑龙江省</option>	
					<option value="江苏省">江苏省</option>	
					<option value="浙江省">浙江省</option>	
					<option value="安徽省">安徽省</option>	
					<option value="福建省">福建省</option>	
					<option value="江西省">江西省</option>	
					<option value="山东省">山东省</option>	
					<option value="河南省">河南省</option>	
					<option value="湖北省">湖北省</option>	
					<option value="湖南省">湖南省</option>	
					<option value="广东省">广东省</option>	
					<option value="海南省">海南省</option>	
					<option value="四川省">四川省</option>	
					<option value="贵州省">贵州省</option>	
					<option value="云南省">云南省</option>	
					<option value="山西省">山西省</option>	
					<option value="甘肃省">甘肃省</option>	
					<option value="青海省">青海省</option>	
					<option value="台湾省">台湾省</option>	
					<option value="内蒙古自治区">内蒙古自治区</option>	
					<option value="广西壮族自治区">广西壮族自治区</option>	
					<option value="西藏自治区">西藏自治区</option>	
					<option value="宁夏回族自治区">宁夏回族自治区</option>	
					<option value="新疆维吾尔族自治区">新疆维吾尔族自治区</option>	
					<option value="香港特别行政区">香港特别行政区</option>	
					<option value="澳门特别行政区">澳门特别行政区</option>	
			    </select>
			    </div>
			    
			  </div>
			  
			  <!-- 收入 -->
			  <div class="form-group">
			    <label for="text" class="col-sm-2 control-label">收入</label>
			    <div class="col-sm-6">
			    <select class="form-control" name="income" >
			    	<option value="3000以下">3000以下</option>
			    	<option value="3000~5000">3000~5000</option>
			    	<option value="5000~10000">5000~10000</option>
			    	<option value="10000~20000">10000~20000</option>
			    	<option value="20000以上">20000以上</option>
			    </select>
			    </div>
			  </div>
			  
			  <!-- 身高 -->
			  <div class="form-group">
			    <label for="text" class="col-sm-2 control-label">身高</label>
			    <div class="col-sm-6">
			    <select class="form-control" name="height">
			    	<option value="140厘米以下">140厘米以下</option>
			    	<option value="140~150厘米">140~150厘米</option>
			    	<option value="150~160厘米">150~160厘米</option>
			    	<option value="160~170厘米">160~170厘米</option>
			    	<option value="170~180厘米">170~180厘米</option>
			    	<option value="180~190厘米">180~190厘米</option>
			    	<option value="190~200厘米">190~200厘米</option>
			    	<option value="200厘米以上">200厘米以上</option>
			    </select>
			    </div>
			  </div>
			  
			  <!-- 婚姻状况 -->
			  <div class="form-group">
			    <label for="text" class="col-sm-2 control-label">婚姻状况</label>
			    <div class="col-sm-6">
			    <select class="form-control" name="wedding">
			    	<option value="single">未婚</option>
			    	<option value="divorce">离异</option>
			    	<option value="sm/fd">丧偶</option>
			    </select>
			    </div>
			  </div>
			  
			  <!-- 学历 -->
			  <div class="form-group">
			    <label for="text" class="col-sm-2 control-label">学历</label>
			    <div class="col-sm-6">
			    <select class="form-control" name="study">
			    	<option value="初中">初中</option>
			    	<option value="中专/职高/技校">中专/职高/技校</option>
			    	<option value="高中">高中</option>
			    	<option value="大专">大专</option>
			    	<option value="本科">本科</option>
			    	<option value="硕士">硕士</option>
			    	<option value="博士">博士</option>
			    </select>
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="date" class="col-sm-2 control-label">验证码</label>
			    <div class="col-sm-3">
			      <input type="text" placeholder="请输入验证码" class="form-control" name="checkcodeinput" id="checkcodeinput">
			      <!-- <label id="checkcodeinput-error" class="error" for="checkcodeinput">验证码错误</label>  -->
			    </div>
			    <div class="col-sm-2">
			    <img src="/zzLoveProduct/CheckImgServlet" id="checkcode"/>
			    </div>
			    
			  </div>
			 
			  <div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <input type="submit"  width="100" value="注册" name="submit" border="0"
				    style="background: url('images/register.gif') no-repeat scroll 0 0 rgba(0， 0， 0， 0);
				    height:35px;width:100px;color:white;">
			    </div>
			  </div>
			</form>
	</div>
	
	<div class="col-md-2"></div>
  
</div>
</div>

	  
	
	<div style="margin-top:50px;">
		<!-- <img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
		 -->
		</div>

		<div style="text-align: center;margin-top: 5px;">
			<ul class="list-inline">
				<li><a>关于我们</a></li>
				<li><a>联系我们</a></li>
				<li><a>招贤纳士</a></li>
				<li><a>法律声明</a></li>
				<li><a>友情链接</a></li>
				<!-- <li><a target="_blank">支付方式</a></li>
				<li><a target="_blank">配送方式</a></li>  -->
				<li><a>服务声明</a></li>
				<li><a>广告声明</a></li>
			</ul>
		</div>
		<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
			Copyright &copy; 2017-2018 指针爱情 版权所有
		</div>

</body></html>




    